<template>
  <el-row :gutter="20">
    <el-col :span="18" :offset="3">
      <el-row :gutter="20" class="topView">
        <div class="topMind">
          <div class="topTitle">UI</div>
          <div class="topLogo">
            <el-avatar
              class="topLogoImg"
              src="https://img.zcool.cn/community/01f2f65c2b27f0a8012029ac28689c.jpg@160w_160h_1c_1e_1o_100sh.jpg"
            ></el-avatar>
            <div class="topText">
              <div class="topLook">查看着</div>
              <div class="textAdmin">超级管理员</div>
            </div>
          </div>
          <div class="bottomText">创建时间：2年前 |  内容数量：{{data.length}}  | 关注人数：0</div>
          <div class="topRight">
            <div class="upWindews" v-show="upWindews">
              <div class="WinTitle">
                <div>上传列表</div>
                <div class="WinClos" @click="WinClos">关闭</div>
              </div>
              <div id="upload-view">
                <div id="upload-view"></div>
              </div>
            </div>
            <el-button type="primary" size="small" id="upload-target"  @click="upload">
              上传
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
            <el-button  size="small" @click="logout" plain>退出</el-button>
          </div>
        </div>
      </el-row>
      <!-- <router-view></router-view> -->
      <Item :data="data"></Item>
    </el-col>
  </el-row>
</template>
<script>
import lottie from "lottie-web"
import Trophy from "@/assets/json/arrowUpCircle.json";
import Item from "@/components/item.vue"
export default {
  data() {
    return {
      visible: false,
      upWindews: false,
      isCollapse: true,
      activePath: "",
      menuList: [],
      data:[],
    };
  },
  components: {
      Item
},
    mounted() {
    this.anim =lottie.loadAnimation({
      container: this.$refs.animation,
      renderer: "svg",
      loop: false,
      autoplay: false,
      animationData: Trophy, //动画json
    });
  },
  created() {
    this.getApi();
    this.getMenuList();
    var activePathSv = window.sessionStorage.getItem("activePath");
    this.activePath = activePathSv === null ? "/item" : activePathSv;
    // this.isCollapse = isCollapseSv === "true" ? true : false;
    // 文件上传接口
    var UPLOAD_URL = this.$config.apiUrl + "upload";
    setTimeout(function () {
      new Q.Uploader({
        url: UPLOAD_URL + "?type=file",
        target: document.getElementById("upload-target"),
        view: document.getElementById("upload-view"),
        //html5: false,
        isDir: true,
      });
    }, 500);
  },

  methods: {
    upload() {
      this.upWindews = true;
    },
    WinClos() {
      var uItem = document.getElementById("upload-view");
      while (uItem.hasChildNodes()) {
        //当div下还存在子节点时 循环继续
        uItem.removeChild(uItem.firstChild);
      }
      this.upWindews = false;
    },
    logout() {
      // 清空token
      window.sessionStorage.clear();
      this.$message.success("退出成功！");
      this.$router.push("/login");
    },
      async getApi() {
      const { data, res } = await this.$http.get("item");
      console.log(data)
      if (data.Code !== 200) return this.$message.error(data.message);
      this.data = data.floder;
      console.log(this.data)
    },
    // 获取请求菜单
    async getMenuList() {
      const { data: res } = await this.$http.get("menus");
      if (res.Code !== 1) return this.$message.error(data.message);
      this.menuList = res.data;
    },
    //保存菜单展开与收缩  有效时间-长期（保存记录）
    isCollapseTab() {
      this.isCollapse = !this.isCollapse;
      // window.localStorage.setItem("isCollapse", this.isCollapse);
    },
    //保存菜单激活状态  有效时间-浏览器关闭就结束
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
    },
      enter(){
      this.anim.play();
      console.log('移入')
    },
    leave(){
      this.anim.stop()
    }
  },
};
</script>

 <style  lang="less" scoped>
.topView {
  width: 100%;
  margin-top: 30px;
  padding: 0 10px;
  position: relative;
}
.topMind {
  background-color: #fff;
  width: 100%;
  // height: 190px;
  padding: 25px;
  box-sizing: border-box;
}
.topLogo {
  width: inherit;
  height: 45px;
  margin-top: 18px;
  display: flex;
  .topLogoImg {
    width: 50px;
    height: 50px;
  }
  .topText {
    margin-left: 12px;
    text-align: left;
    .topLook {
      margin-top: 6px;
      color: #bbb;
      font-size: 14px;
    }
    .textAdmin {
      color: #333;
      font-size: 16px;
      font-weight: 500;
    }
  }
}
.bottomText {
  width: inherit;
  height: 24px;
  color: #bbb;
  margin-top: 22px;
  line-height: 24px;
  font-size: 16px;
  font-weight: 300;
  overflow: hidden;
  text-overflow:ellipsis;//文字隐藏后添加省略号
  white-space:nowrap; //强制不换行

}
.topTitle {
  width: inherit;
  font-weight: 400;
  font-size: 24px;
}
.topRight {
  display: flex;
  height: 35px;
  width: 160px;
  margin-top: 100px;
  position: absolute;
  bottom: 20px;
  right: 10px;
  #upload-target {
    float: right;
  }
}
.el-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
  @media (max-width: 900px) {
    .upWindews {
      width: 100%;
    }
    .topRight {
      display: none;
    }
  }
</style>